<template>
  <foreignObject  :x="task.x" :y="task.y"  :height="task.height" :width="task.width">
     <body xmlns="http://www.w3.org/1999/xhtml" style="background:#00000000">
        <div class="hover-div"  
            @mouseenter="handleEnter" 
            @mouseleave="handleLeave" 
            ref="hover">
            
        </div>
     </body>
  </foreignObject>
</template>

<script>
export default {
  name: 'HoverStep',
  inject: ['root'],
  props: ['task'],
  data() {
    return {
    };
  },

  computed: {
   
  },
  methods: {
    handleEnter(event){
      console.log('handleEner =',event)
      
      const hover = this.$refs.hover;
      const {clientWidth,clientHeight} = hover
      const {width:rectWidth,height:rectHeight} = hover.getBoundingClientRect()
      const {clientX,clientY,offsetX,offsetY,layerX,layerY} = event
      const left = clientX - offsetX * (rectWidth/clientWidth)
      const top = clientY - offsetY * (rectHeight/clientHeight)
    //   const {bottom,height,left,right,top,width} = hover.getBoundingClientRect()
      const rect = {height:clientHeight,left,top,width:clientWidth}
    //   console.log('hover.getBoundingClientRect() =',rect)

      this.root.$emit('step-hover-enter',{data:this.task,event,rect}) 
       
    },
    handleLeave(event){
    //   console.log('handleleave =',event)
      this.root.$emit('step-hover-leave',{data:this.task,event}) 
    }
  }
};
</script>
<style lang="scss" scoped>

.hover-div{
    width:100%;
    height:100%;
    background:#1fff0000;
    position:relative;
}
</style>
